<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据管理</title>
</head>
<body>
{% extends 'index.html' %}
<div>
    {% block content %}
    <!-- 表单提交处 -->
    <div class="layui-col-md9 site-content" style="margin-top:20px">
        <form class="layui-form" action="/add/" method="post">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">学院</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="college" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="stu_card" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">课程</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="course" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">专业</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="major" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="stu_name" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">分数</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="score" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="t_lass" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <button type="submit" class="layui-btn">确认</button>
                        <span>{{ msg }}</span>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- 表格显示处 -->
    <table class="layui-table">
        <thead>
        <tr>
            <th>学院</th>
            <th>专业</th>
            <th>班级</th>
            <th>学号</th>
            <th>姓名</th>
            <th>课程</th>
            <th>分数
                &nbsp;&nbsp;
                <span onclick="upfunc('up')" style="cursor:pointer;"><i class="layui-icon layui-icon-up" style="font-size: 20px; color: #009688;"></i></span>
                <span onclick="upfunc('down')" style="cursor:pointer;"><i class="layui-icon layui-icon-down" style="font-size: 20px; color: #009688;"></i></span>
            </th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="showTable">

        </tbody>
    </table>
</div>
{% endblock %}
</div>
</body>
</html>
<script type="text/javascript">
{% block js %}
$(function(){
    // 读取所有学生信息
    $.ajax({
        url:'/scores/',
        type:'GET',
        contentType: "application/json;charset=UTF-8",//设置请求参数类型为json字符串
        dataType:"json",
        success:function(result){
            console.log('hello')
            console.log(result)
            results = result.datas
            html = ''
            for(var i =0; i<results.length; i++){
                html = html + "<tr>"
                       + "<td>" + results[i].college +"</td>"
                       + "<td>" + results[i].major +"</td>"
                       + "<td>" + results[i].t_lass +"</td>"
                       + "<td>" + results[i].stu_card +"</td>"
                       + "<td>" + results[i].stu_name +"</td>"
                       + "<td>" + results[i].course +"</td>"
                       + "<td>" + results[i].score +"</td>"
                       + "<td><span style='cursor:pointer;' onclick='edit(&#39;"+results[i].college+"&#39;,&#39;"+results[i].major+"&#39;,&#39;"+results[i].t_lass+"&#39;,&#39;"+results[i].stu_card+"&#39;,&#39;"+results[i].stu_name+"&#39;,&#39;"+results[i].course+"&#39;,&#39;"+results[i].score+"&#39;)'><i class='layui-icon layui-icon-edit'></i></span>"
                       + "&nbsp;&nbsp;<span style='cursor:pointer;' onclick='deletel(&#39;"+results[i].college+"&#39;,&#39;"+results[i].major+"&#39;,&#39;"+results[i].t_lass+"&#39;,&#39;"+results[i].stu_card+"&#39;,&#39;"+results[i].stu_name+"&#39;,&#39;"+results[i].course+"&#39;,&#39;"+results[i].score+"&#39;)'><i class='layui-icon layui-icon-delete'></i></span></td>"
                       + "<tr>"
            }
            $("#showTable").append(html)
            console.log(results)
        },
        error:function (error) {
                console.log(error)
	        }
    })
})
    // 修改学生信息
    function edit(college,major,lcass,car,name,course,score){

    console.log(college)
    layer.open({
    title: '修改学生成绩'
    ,skin: 'layui-layer-lan'
    ,area: ['600px', '565px']
    ,content: '<form action="modify" type="POST"><div class="layui-form-item"> <label class="layui-form-label">学院</label><div class="layui-input-block"><input type="text" value="'+college+'" class="layui-input" name="college" disabled></div></div><div class="layui-form-item"><label class="layui-form-label">专业</label><div class="layui-input-block"><input type="text" value="'+major+'" class="layui-input" name="major" disabled></div></div><div class="layui-form-item"><label class="layui-form-label">班级</label><div class="layui-input-block"><input type="text" value="'+lcass+'" class="layui-input" name="t_lass" disabled></div></div><div class="layui-form-item"><label class="layui-form-label">学号</label><div class="layui-input-block"><input type="text" value="'+car+'" class="layui-input" name="stu_card" disabled></div></div><div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-block"><input type="text" value="'+name+'" class="layui-input" name="stu_name" disabled></div></div><div class="layui-form-item"><label class="layui-form-label">课程</label><div class="layui-input-block"><input type="text" value="'+course+'" class="layui-input" name="course" disabled></div></idv><div class="layui-form-item"><label class="layui-form-label">分数</label><div class="layui-input-block"><input type="text" value="'+score+'" class="layui-input" name="score" id="score"></div></div></form>'
    ,btn: ['确定', '取消']
    ,yes:function(index,layero){
        $.post('/modify/',{
              		  'college': college,
              		  'major':major,
              		  't_lass':lcass,
              		  'stu_card':car,
              		  'stu_name':name,
              		  'course':course,
              		  'score':$("#score").val()
              	  })
         layer.close(index);
         location.reload()
        }
        });
    }

    // 删除学生信息
    function deletel(college,major,lcass,car,name,course,score){
        console.log(college)
        $.ajax({
            url:'/delete/',
            type:'POST',
            data:{
                      'college': college,
              		  'major':major,
              		  't_lass':lcass,
              		  'stu_card':car,
              		  'stu_name':name,
              		  'course':course,
              		  'score':score
            },
            contentType: "application/json",//设置请求参数类型为json字符串
            dataType:"json",
            success:function(result){
                 alert("数据删除成功！！")
                location.reload()
            }
        })
    }

    // 分数排序
    function upfunc(msg){
        $.ajax({
            url:'/scores/?sorted='+msg,
            type:'GET',
            contentType: "application/json;charset=UTF-8",//设置请求参数类型为json字符串
            dataType:"json",
            success:function(result){
                $("#showTable").empty()
                results = result.datas
                html = ''
                for(var i =0; i<results.length; i++){
                    html = html + "<tr>"
                           + "<td>" + results[i].college +"</td>"
                           + "<td>" + results[i].major +"</td>"
                           + "<td>" + results[i].t_lass +"</td>"
                           + "<td>" + results[i].stu_card +"</td>"
                           + "<td>" + results[i].stu_name +"</td>"
                           + "<td>" + results[i].course +"</td>"
                           + "<td>" + results[i].score +"</td>"
                           + "<td><span onclick='edit(&#39;"+results[i].college+"&#39;,&#39;"+results[i].major+"&#39;,&#39;"+results[i].t_lass+"&#39;,&#39;"+results[i].stu_card+"&#39;,&#39;"+results[i].stu_name+"&#39;,&#39;"+results[i].course+"&#39;,&#39;"+results[i].score+"&#39;)'><i class='layui-icon layui-icon-edit layui-bg-green'></i></span></td>"
                           + "<tr>"
                }
                $("#showTable").append(html)
                console.log(results)
            },
            error:function (error) {
                    console.log(error)
                }
        })
    }
{% endblock %}

</script>